<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%--
  Created by IntelliJ IDEA.
  User: 冲塔怪
  Date: 2022/5/2
  Time: 17:12
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@include file="/jsp/common/left.jsp"%>
<%
    String basePath = request.getScheme()
            +"://"
            + request.getServerName()
            + ":"
            + request.getServerPort()
            + request.getContextPath()
            + "/";
%>
<html>
<head>
    <title>Title</title>
    <script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
    <script type="text/javascript">
        $(function(){
            $("#searchPageBtn").click(function () {
                var pageNo = $("#pn_input").val();
                location.href = "${requestScope.page.url}&pageNo="+pageNo;
            });

            $("#resetPageBtn").click(function () {
                location.href = "good?action=page&pageNo=1";
            });

            $(":text").css({
                "width":"50px",
                "height":"30px"
            });

            $("button.addToCart").click(function () {
                var goodId = $(this).attr("goodId");
                location.href = "<%=basePath%>cart?action=addItem&id="+goodId;
            });

            $(".img_update").click(function () {
                var goodId = $(this).attr("goodId");
                $(".file").attr("goodId",goodId);
                $(".file").click();
            });
        });


    </script>
    <style>
        * {
            box-sizing: border-box;
        }
        body {
            font-family: Arial, Helvetica, sans-serif;
        }

        .row:after {
            content: "";
            display: table;
            clear: both;
        }
        .main{
            margin-left: 160px;
        }
        .header {
            background-color: #f1f1f1;
            padding: 10px;
            text-align: center;
            font-size: 30px;
        }
        .search{
            width: 100%;
        }
        .search_1{
            margin-left: 40%;
        }
        .column{
            float: left;
            width: 170px;
            padding: 10px;
            height: 300px;
        }
        .img_update{
            align: center;
            margin: 0 auto;
        }
        .footer {
            background-color: #f1f1f1;
            padding: 10px;
            text-align: center;
        }
    </style>
</head>
<body>
    <div class="main">
        <div class="header"><h2>商品展示</h2></div>
        <div class="search">
            <div class="search_1">
                <form action="good" method="get">
                    <input type="hidden" name="action" value="pageByPrice">
                    价格: <input type="text" name="min" value="${param.min}"> -
                    <input type="text" name="max" value="${param.max}"> 元
                    <input type="submit" value="查询">
                    <input id="resetPageBtn" type="button" value="清空">
                </form>
            </div>
        </div>
        <div  class="row">
            <c:forEach items="${requestScope.page.items}" var="good">
                <div class="column">
                    <div class="column_1">
                        <div style="text-align: center;">
                            <img src="${good.imgPath}" goodId="${good.id}" class="img_update" alt="">
                        </div>
                        <div>
                            <span>商品名</span>
                            <span>${good.name}</span>
                        </div>
                        <div>
                            <span>价格</span>
                            <span>￥${good.price}</span>
                        </div>
                        <div>
                            <span>销量</span>
                            <span>${good.sales}</span>
                        </div>
                        <div>
                            <span>库存</span>
                            <span>${good.stock}</span>
                        </div>
                        <div >
                            <button goodId="${good.id}" class="addToCart">加入购物车</button>
                        </div>
                    </div>
                </div>
            </c:forEach>
        </div>

        <br>
        <div class="footer">
            <!-- 大于第一页，才显示 -->
            <c:if test="${requestScope.page.pageNo > 1}">
                <a href="${requestScope.page.url}&pageNo=1">首页</a>
                <a href="${requestScope.page.url}&pageNo=${requestScope.page.pageNo-1}">上一页</a>
                <a href="${requestScope.page.url}&pageNo=${requestScope.page.pageNo-1}">${requestScope.page.pageNo-1}</a>
            </c:if>

            【${requestScope.page.pageNo}】

            <c:if test="${requestScope.page.pageNo < requestScope.page.pageTotal}">
                <a href="${requestScope.page.url}&pageNo=${requestScope.page.pageNo+1}">${requestScope.page.pageNo+1}</a>
                <a href="${requestScope.page.url}&pageNo=${requestScope.page.pageNo+1}">下一页</a>
                <a href="${requestScope.page.url}&pageNo=${requestScope.page.pageTotal}">末页</a>
            </c:if>
            共${requestScope.page.pageTotal}页 ${requestScope.page.pageTotalCount}条记录
            到第<input name="pn" id="pn_input">
            <input id="searchPageBtn" type="button" value="确定">
        </div>
        <div>
            <form action="/manage/file" encType="multipart/form-data" method="post">
                <input type="file" name="photo" class="file">
                <input type="submit" value="上传">
            </form>
        </div>
    </div>
</body>
</html>
